<template>
	<view>
		<top_nav_return :topNavTitle="topNavTitle" :returnState="returnState" :router="'pages/index/index'"></top_nav_return>
		<view class="major-body">
			<view class="major_list" v-for="(item,index) in majorArray" :key="index">
				<view class="major_title">
					{{item.majorName}}
				</view>
				<view class="major_option" v-if="item.wdResourcesMajorList.length > 0">
					<button v-for="item2 in item.wdResourcesMajorList" :key="item2.id"
						:class="[activeMajorId == item2.id ? 'active-c' : 'blur-c', 'btn']" @click="activeMajor(item2)">
						{{ item2.majorName }}
					</button>
				</view>
			</view>
			<!-- ================= -->
			<!-- <view class="major-item" v-for="item1 in majorArr" :key="item1.id">
				<Title :title="item1.majorName" :type="1" v-if="item1.wdResourcesMajorList.length > 0" />
				<view class="major-content" v-if="item1.wdResourcesMajorList.length > 0">
					<button v-for="item2 in item1.wdResourcesMajorList" :key="item2.id"
						:class="[activeMajorId == item2.id ? 'active-c' : 'blur-c', 'btn']" @click="activeMajor(item2)">
						{{ item2.majorName }}
					</button>
				</view>
			</view> -->
			<!-- ================= -->
		</view>
	</view>
</template>

<script>
	// import Title from "@/components/title_comp.vue";
	import {
		wxLogin,
		bindinMajor
	} from "@/api/login.js";
	import {
		getMajor,
		newList
	} from "@/api/professionalChoice.js";
	import {
		getToken,
		setMajorInfo,
		getMajorInfo
	} from "@/common/util/index.js";
	export default {
		components: {
			// Title,
		},
		data() {
			return {
				topNavTitle: '专业选择',
				returnState: true,
				imageUrls: getApp().globalData.imaeWd,
				majorArray: [
					// {majorName: '111',id: 1,wdResourcesMajorList: [{majorName: '111',id: 2}, {majorName: '111',id: 3}, {majorName: '111',id: 4}]},
					// {majorName: '222',id: 5,wdResourcesMajorList: [{majorName: '222',id: 6}, {majorName: '112221',id: 7}, {majorName: '112221',id: 8}]},
				],
				majorArr: {},
				activeMajorId: "",
			};
		},
		onLoad(option) {
			console.log(option);
			if (option.new == '1') {
				this.returnState = false
			}
			// uni.showModal({
			// 	title: '123',
			// 	content: decodeURIComponent(opt.q)
			// })
		},
		mounted() {
			// console.log('执行');
			this.getAll();
			if (getToken()) {
				const MajorInfo = getMajorInfo();
				this.activeMajorId = MajorInfo ? MajorInfo.id : "";
			}
		},
		methods: {
			// 接收选取的课程
			activeMajor(item) {
				this.activeMajorId = item.id;
				// uni.setStorageSync("MajorInfo", item);
				setMajorInfo(item);
				if (uni.getStorageSync('token')) {
					const valdsa = bindinMajor({
						majorId: getMajorInfo().id,
					});
				}
				let shareUrl = ''
				try {
					shareUrl = uni.getStorageSync('shareUrl')
				} catch (err) {}
				if (shareUrl) {
					uni.reLaunch({
						url: shareUrl
					})
				} else {
					uni.reLaunch({
						url: '/pages/index/index?isAss=true'
					})
				}
			
			},
			// 获取专业科目列表
			// getAll() {
			// 	// let that = this;
			// 	uni.request({
			// 		// url: 'https://wendu.changyangdt.com/questionApi/courseapi/majorChoice',
			// 		url: 'https://wendu.changyangdt.com/questionApi/resources/major/wdResourcesMajor/list',
			// 		// url: 'https://wendu.changyangdt.com/questionApi/resources/major/wdResourcesMajor/newList',
			// 		method: 'GET',
			// 		// header: {
			// 		// 	'content-type': 'application/x-www-form-urlencoded'
			// 		// },
			// 		success: res => {
			// 			console.log('all:', res);
			// 			this.majorArr = res.result;
			// 		}
			// 	});
			// 	// this.majorArr = res.result;
			// 	// console.log('all:', res.result)
			// },
			// 获取专业科目列表
			getAll() {
				console.log('appid:', uni.getAccountInfoSync().miniProgram.appId);
				// let data = {
				// 	appId: uni.getAccountInfoSync().miniProgram.appId
				// }
				let appId = uni.getAccountInfoSync().miniProgram.appId
				// let appId = 'wxa1a230d527c944e7'
				getMajor(appId).then((res) => {
					console.log('获取专业：', res);
					this.majorArray = res.result;
				}).catch((err) => {
					console.log(err);
				});
			},
		},
	};
</script>
<style>
	page,
	body {

		background-color: #ffffff !important;

	}
</style>
<style lang="scss" scoped>
	page {

		background-color: #ffffff !important;

	}

	.major_title {
		// text-align: center;
		margin-top: 60rpx;
		margin-bottom: 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #132B2E;
	}

	.major_option {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.active-c {
			background: #e3ecff;
			border: 2rpx solid #3b7bff;
			color: #3b7bff;
		}

		.blur-c {
			background-color: #fff;
			border: 2rpx solid #dddddd;
			color: #333;
		}

		.btn {
			width: calc(50% - 15rpx);
			// width: calc(50% - 30rpx / 2);
			box-sizing: border-box;
			text-align: center;
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 33rpx;
			padding: 0 20rpx;
			margin: 0 0 36rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;

			&::after {
				border: none;
			}
		}
	}

	.major-body {
		margin-top: 170rpx;
		box-sizing: border-box;
		padding: 0 30rpx 50rpx;
		width: 100%;
		// background-color: blue;
		border-top: 1rpx solid #ddd;

		.major-item {
			padding-top: 35rpx;

			.major-content {
				// column-count: 3;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;

				.active-c {
					background: #e3ecff;
					border: 2rpx solid #3b7bff;
					color: #3b7bff;
				}

				.blur-c {
					background-color: #fff;
					border: 2rpx solid #dddddd;
					color: #333;
				}

				.btn {
					width: calc(50% - 15rpx);
					box-sizing: border-box;
					text-align: center;
					height: 66rpx;
					line-height: 66rpx;
					border-radius: 33rpx;
					padding: 0 20rpx;
					margin: 0 0 36rpx 0;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;

					&::after {
						border: none;
					}
				}
			}
		}
	}
</style>
